<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<link href='http://feeds2.feedburner.com/Woork' rel='alternate' title='Woork is a popular blog created by Antonio Lupetti. Topics focus on Web Design, Tech News, Resources and Inspiration.' type='application/rss+xml'/>
<head>
<script src='http://woork.mobify.me/mobify/redirect.js' type='text/javascript'></script>
<script type='text/javascript'>try{_mobify("http://woork.mobify.me/");} catch(err) {};</script>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var a=window;function c(b){this.t={};this.tick=function(b,i,d){d=void 0!=d?d:(new Date).getTime();this.t[b]=[d,i]};this.tick("start",null,b)}var f=new c;a.jstiming={Timer:c,load:f};try{var g=null;a.chrome&&a.chrome.csi&&(g=Math.floor(a.chrome.csi().pageT));null==g&&a.gtbExternal&&(g=a.gtbExternal.pageT());null==g&&a.external&&(g=a.external.pageT);g&&(a.jstiming.pt=g)}catch(h){};a.tickAboveFold=function(b){var e=0;if(b.offsetParent){do e+=b.offsetTop;while(b=b.offsetParent)}b=e;750>=b&&a.jstiming.load.tick("aft")};var j=!1;function k(){j||(j=!0,a.jstiming.load.tick("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",k,!1):a.attachEvent("onscroll",k);
 })();</script>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='http://woork.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Woork - Atom" href="http://woork.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Woork - RSS" href="http://woork.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Woork - Atom" href="http://www.blogger.com/feeds/8903834426366267848/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=8903834426366267848" />
<link rel="alternate" type="application/atom+xml" title="Woork - Atom" href="http://woork.blogspot.com/feeds/6065842085356573640/comments/default" />
<link rel="image_src" href="http://lh5.ggpht.com/_TqPdHmAEwTM/Sq-_HCAddTI/AAAAAAAAFoM/W0TEenZJ2Gs/s72-c/html5preview.jpg" />
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<title>
HTML 5 Visual Cheat Sheet by Woork
</title>
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/1710613946-widget_css_bundle.css' />
<link type="text/css" rel="stylesheet" href="http://www.blogger.com/dyn-css/authorization.css?targetBlogID=8903834426366267848&zx=577b45fd-1081-450b-ad0f-b5400ab99feb"/>
<style type="text/css">
#navbar-iframe { display:block }
#b-navbar{white-space:nowrap;color:#fff;height:29px;border-bottom:1px solid #024;background:transparent;font-size:13px;font-family:Arial,Sans-serif}#b-navbar #b-navbar-bg{position:absolute;left:0;top:0;width:100%;height:30px;z-index:-1;background-color:#036;opacity:1.0;filter:alpha(opacity=100)}#b-navbar-fg{padding:4px 1em 3px 0}#b-navbar-controls{margin-left:.2em}#b-navbar #b-navbar-logo{display:block;margin-right:8px;margin-left:8px;width:20px;height:20px;background:url('http://img1.blogblog.com/img/navbar/icons_orange.png') no-repeat -26px 0;cursor:pointer;cursor:hand}#b-navbar #b-query-box{background-color:#fff;margin:0 .5em 0 0;border:1px solid #014;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:0 .3em}#b-navbar #b-query-icon{display:block;width:13px;height:13px;cursor:pointer;cursor:hand;background:url('http://img1.blogblog.com/img/navbar/icons_orange.png') no-repeat 0 0}#b-navbar #b-query-icon:hover{background:url('http://img1.blogblog.com/img/navbar/icons_orange.png') no-repeat -13px 0}#b-navbar #b-query{font-size:13px;color:#000;background-color:transparent;border:none;width:10em;margin:0}#b-navbar .b-link,#b-navbar #b-user{font-size:13px;vertical-align:middle;padding:0 .4em}#b-navbar .b-link{color:#9cf;text-decoration:none;white-space:nowrap;cursor:pointer;cursor:hand}#b-navbar .b-link:hover{color:#fff;text-decoration:underline}#bt-unflag-body{display:none}#flagi,#unflagi{display:none;top:3px;color:#000;background-color:#ff9;border:1px solid #333;z-index:300;padding:4px;font-size:.7em;line-height:.8em}#flagi a,#unflagi a{color:#3366cc;text-decoration:underline}.b-mobile{display:none}#b-sms{margin:0 0 0 100px;padding:4px 7px;line-height:1em;font-size:100%;text-align:left}#b-sms a{margin-right:.5em;line-height:1em}#b-sms a:hover{text-decoration:underline}@media handheld{body .b-mobile{display:block}body #b-navbar-fg,body #flagi,body #unflagi{display:none}}</style>
<style id='page-skin-1' type='text/css'><!--

/*

--></style>
<style type='text/css'>
/* -------------------------------- */
/* RESET HTML TAG					*/ 

body {
background:#CCC;
color:#444;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

a:link, a:visited{
color:#185D99;
text-decoration:none;
font-weight: normal;
}
a:hover{text-decoration:underline;}

body{border:0;margin:0;padding:0;}
form{border:0; margin:0;}
form {font-size:12px;}
form, input {padding:0}
h1,h2,h3,h4,h5 {margin:0; border:0; padding:0;}
h2 {font-family:Arial, Helvetica, sans-serif; font-size:24px; padding-bottom:12px; line-height:28px; border-top:solid 2px #DEDEDE; padding-top:14px;}
h2 a:link, h2 a:visited{color:#333; text-decoration:none; font-weight:bold;}
h2 a:hover{color:#000;}
h3 {
font-size:16px; 
line-height:28px; 
color:#232323;
padding-bottom:6px;
}
h3 a:link, h3 a:visited{color:#666; font-size:11px;}

h4{
font-size:12px;
color:#40403b;
margin-bottom:14px;
}
h5{
font-size:14px;
line-height:22px;
display:block;
padding-bottom:10px;
color:#000;
}
blockquote {
margin: 20px; 
padding:0 0 0 14px;	
color: #666; 
border-left: 2px solid #999;
}

ul,li{margin:0; border:0; padding:0;}
ul{margin-bottom:20px;}
li{list-style:none; display:block;}

div.code{font-family:"Courier New", Courier, monospace; font-size:12px; color:#000; border:solid 2px #d7e8f0; background:#f5f8fa; padding:10px; line-height:14px;}

/* -------------------------------- */
/* Header							*/ 

#header {
height:50px;
background: #282828;
}
#header-c{
margin:0 auto; 
width:972px;
height:50px;
background: url(http://lh4.ggpht.com/_TqPdHmAEwTM/SontXb9NKRI/AAAAAAAAFio/hsEhgj81cpY/top-bg.jpg) no-repeat;
}
#header p{border:0; padding:0; margin:0; display:inline; height:50px; line-height:50px;}
#header p.left{width:110px; float:left;}
#header p.right{width:500px; float:right; text-align:right;}
#header p.right a:link, #header p.right a:visited {
color:#555; 
text-decoration:none; 
font-size:14px;
font-weight:bold;
margin-left:14px;
border-bottom:solid 1px #333;
}
#header p.right a:hover {color:#999;}

/* -------------------------------- */
/* Top Section  					*/
#container {
width:936px;
margin:0px auto;
padding:16px;
background:#fff;
}
/* -------------------------------- */
/* Navigation Bar  					*/
#nav-bar {
margin: 0 auto;
background: #EFEFEF;
border-bottom:solid 1px #DEDEDE;
height:57px;
}
#nav-bar-c,
#nav-bar-d{
width:968px;
margin: 0 auto;
height:28px;
clear:both;
background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SrvIvNTmvKI/AAAAAAAAFs4/QVbKm86CYJQ/shadebar.jpg) no-repeat;
}
#nav-bar-d{background:none;}
#nav-bar-c a:link, 
#nav-bar-c a:visited,
#nav-bar-d a:link, 
#nav-bar-d a:visited,
.nav-web,
.nav-tech{
display:block;
float:left;
color:#333;
font-size:11px;
height:28px;
line-height:28px;
padding:0 10px;
font-weight: bold;
text-decoration:none;
}
#nav-bar-d a:link, 
#nav-bar-d a:visited{font-weight:normal;}

#nav-bar-c a:hover{text-decoration:none; color:#E27100;}
#nav-bar-d a:hover{text-decoration:none; color:#00B0CB;}
.nav-web, .nav-tech{width:80px; text-align:center; padding:0;}
.nav-web{background:url(http://lh3.ggpht.com/_TqPdHmAEwTM/SrvPpxTkaxI/AAAAAAAAFtA/vGeYzL686v4/pic-wd.gif) no-repeat; width:76px;}
.nav-tech{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SrvKyC5RMdI/AAAAAAAAFs8/P8OMjQufaVE/pic-news.jpg) no-repeat; width:76px;}

#searchform {
	position: relative;
	height: 41px;
	line-height: 41px;
	overflow: hidden;
	margin-bottom:20px;
}
#search-box, #source-box {
	margin: 0 !important;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	height: 21px;
	border: 1px solid #dadddd;
	color: #484848;
	padding: 9px;
	width: 100% !important;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
#search-submit {
	position: absolute;
	right: 0px;
	top: 0;
	overflow: hidden;
	outline: none !important;
}

#search-submit:active {
	top: -41px;
}

/*IE7 Hacks*/
* html #searchform { padding-bottom:1px; }
* html #search-box { line-height: 1.2em !important; }
* html #search-submit{ top: 1px; }

.moved{border:solid 1px #DEDEDE;
	background:#FFFFCC;
	padding:8px;
	font-size:16px;
	text-align:center;
	font-weight:bold;
	margin-bottom:10px;
}
.dir_ads{
background:#EFEFEF;
text-align:center;
height:123px;
line-height:123px;
font-size:12px;
border:solid 1px #DEDEDE;
text-align:center;
width: 123px;
}
.dir_ads a{font-weight:bold;text-decoration:underline;}
.dir_ads a:hover{
text-decoration:none;
color: #555;
}
.dir_ads-rec{
background:#FFFFCC;
text-align:center;
font-size:12px;
border:solid 1px #DEDEDE;
padding:4px;
text-align:center;
width: 115px;
}
.dir_ads-rec a{
text-decoration:underline;
color:#232323;
font-size:13px;
font-weight:bold;
display:block;
margin-bottom:6px;
}

/* -------------------------------- */
/* Main				  				*/
#main_page {
width:856px; 
padding-top:20px;
background:#FFFFFF; 
}
*html #main_page{overflow:auto;}
/* * html #main {height: 1%;} */
/* -------------------------------- */
/* Left column		  				*/
#main_left {
padding:0 28px 0 0px;
line-height:18px;
}
#main_left em{font-style:normal; background:#fbfbdd;}
/* -------------------------------- */
/* Right column 				*/		
#main_right {
width:354px;
float:left;
font-size:11px;
}
#main_right .section-w{
border:solid 4px #e0dfd0;
border-top:none;
background:#f4f4e9;
padding:14px;
margin-bottom:20px;
}
#main_right .section-w a{text-decoration:underline;}
#main_right .section-w a:hover{text-decoration:none;}

/* -------------------------------- */
/* Sidebar sections					*/

.sidebar_sec{
font-size:11px;
line-height:16px;
padding:6px 0;
margin-bottom:20px;
}
.sidebar_sec li {
padding-bottom:4px;
border-bottom:solid 1px #e0dfd0;
margin-bottom:4px;
}

.sidebar_sec a:link, .sidebar_sec a:visited {text-decoration:none;}

.sidebar_sec li a:hover {text-decoration:underline; color:#555555;}

/* -------------------------------- */
/* List Sections					*/

.list_section{
font-size:12px;
line-height:16px;
margin-bottom:30px;
background-color: #EFEFEF;
padding:10px;
border:solid 1px #DEDEDE;
}
.list_section li {
padding-bottom:6px;
border-bottom:solid 1px #DEDEDE;
margin-bottom:6px;
}

.list_section a:link, .list_section a:visited {text-decoration:none;}
.list_section li a:hover {text-decoration:underline; color:#555555;}
.list_section li:last-child {border: none; padding:0; margin:0;} 

#twitter_update_list li {
padding-bottom:6px;
border-bottom:solid 1px #DEDEDE;
margin-bottom:6px;
}
/* -------------------------------- */
/* Footer							*/
#container-footer{
clear:both;
background:#373737;
}
#footer{
font-size:13px;
color:#FFF;
width:940px;
line-height:22px;
margin:0 auto;		
}
#footer a:link, 
#footer a:visited{
color:#888;
text-decoration:underline;
}
#footer a:hover{text-decoration:none; color:#CCC;}

#footer .central-p{padding:0 20px;}
#footer h1{
margin:10px 0 26px 0;
font-size:18px;
color:#FFF;
border-bottom:solid 2px #444;
padding-bottom:6px;
}
#footer-botton{
padding:10px 0;
border-top:1px solid #444;
margin-top:10px;
font-size:12px;
text-align:center;
}

/* -------------------------------- */
/* BLOGGER ELEMENT 					*/ 

#navbar{display:none; height:0; visibility:hidden;}

.date-header{
color:#999; 
font-size:12px; 
margin-bottom:12px;
padding:0px;
}
.blog-pager{font-size:12px;}
.blog-pager a:link, .blog-pager a:visited{
display:block;
float:left;
padding:6px 10px;
text-align:center;
background:#888;
color:#FFF;
font-size:12px; 
font-weight:bold; 
margin-right:8px;
}
.blog-pager a:hover{
background:#444;
color:#FFF;
}
/* -------------------------------- */
/* Status Messages	 				*/
.status-msg-wrap-n{
padding:0px; 
margin:0; 
}
.status-msg-body-n{
text-align:left;
padding:6px;
background:#FFFFCC;
width:auto;
display:block;
font-size:13px;
margin-bottom:30px;
}
/* -------------------------------- */
/* Post Body		  				*/
.post-body-n {
font-size:13px; 
line-height:20px;
color:#444;
}
.post-body-n a:link, .post-body-n a:visited {text-decoration:underline;}
.post-body-n a:hover{text-decoration:none;}

.post-body-n strong{color:#000;}
/* -------------------------------- */
/* Comments section  				*/ 
.comment_auth{color:#444; font-size:12px; background:#EDEDED; padding:4px; font-weight:bold; text-decoration:none;}
.comment_auth a:link, .comment_auth a:visited, 
.comment_auth a:hover{
font-weight:bold; color:#232323; border-bottom:solid 1px #888; 
padding-bottom:2px; text-decoration:none;} 
.comment-time{font-size:11px; color:#333333;}
.comment-time a:link, .comment-time a:visited {
font-size:11px; color:#999; background:none; width:auto; height:auto;
text-align:left; font-weight:normal;
}
a.comment-link{font-weight: bold;}
dd{margin:0; border:0; padding:0; padding:0 10px;}
dd.comment-body{}
dd.comment-body p{border:0; padding:0; margin:0; padding:10px 0;}
dd.comment-footer{margin-bottom:10px;}

/* -------------------------------- */
/* CUSTOM CLASSES					*/ 

div.spacer{clear:both; height:10px; display:block;}
.b-spacer{clear:both; padding:10px 0; display:block;}

.small-txt{
font-size:11px;
padding-top:6px;
border-top:solid 2px #D1D1D1;
}
.small-txt strong{color:#000; size:11px; line-height:14px;}

.profile_img{float:left; margin:3px 6px 2px 0px; background:#FFF; border:solid 1px #444; padding:3px;}
.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}

.mini-feed{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrVhkTClEUI/AAAAAAAAFqo/v8AYhMipuYU/feed.gif) no-repeat;}
.mini-tweet{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SrVkkLNvMlI/AAAAAAAAFqs/S-UYpTlrZa8/tweet.gif) no-repeat;}
.mini-tech{background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SrVsIDBoz7I/AAAAAAAAFqw/UpGK_0UQUZg/technorati.gif) no-repeat;}
.mini-facebook{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrXQ3G_uRnI/AAAAAAAAFq0/ktY0xwRy4Oo/fb.gif) no-repeat;}
.bottom-share-links{height:40px; clear:both; padding-top:10px;}
.bottom-share-links .mini-feed{float:left; margin-right:16px;}
	
.post-tag{font-size:12px; margin-bottom:10px;}
.post-tag a:link, .post-tag a:visited{color:#666; text-decoration:underline;}
.post-tag a:hover{text-decoration:none;}

.feed-small-right,
.twitter-follow{ 
font-size:11px;
float:right;
font-weight:bold;
line-height:35px;
height:35px;
}
.feed-small-right{margin-right:36px;}
.feed-small-right a:link, 
.feed-small-right a:visited{
	color:#fff;
	font-weight:bold;
}
.twitter-follow {background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SgxdH2E0JsI/AAAAAAAAEDE/HTXaxE7_KaU/twitter.png) right 6px no-repeat;}

.share-delicious{
background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/Sgxdp40mQUI/AAAAAAAAEDM/_Nee9ul6zpc/s128/delicious.png) left top no-repeat;
padding-left:26px;
font-size:11px;
line-height:18px;
float:left;
}
.share-stumble{
background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SgxJoM2788I/AAAAAAAAECk/XpF9W9zOm64/su.png) 10px top no-repeat;
margin-left:10px;
padding-right:10px;
border-left:solid 1px #DEDEDE;
border-right:solid 1px #DEDEDE;
padding-left:36px;
font-size:11px;
line-height:18px;
float:left;
}
.right-social{
margin-left:10px;
font-size:11px;
line-height:28px;
float:right;
}

.big-number {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
line-height:20px; 
font-weight:bold;
color:#232323;
}


#creditfooter{display:none;}

.s_delicious{
float:right;
line-height:28px;
border:none;
background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/Sgxdp40mQUI/AAAAAAAAEDM/_Nee9ul6zpc/s128/delicious.png) left no-repeat;
padding:0 10px 0 20px;
font-size:12px;
width: auto;
text-align: right;
display: block;
}
.s_delicious a:link, .s_delicious a:visited{
border:none;
text-transform:none;
font-size:12px;
}
.s_delicious b{color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:22px;}

.powered-blogger{
background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SonEZW5u58I/AAAAAAAAFho/CwvJqVEIDdU/powered-by.png) no-repeat; 
height:21px;
line-height:21px;
text-indent:28px;
margin-bottom:10px;
}
.welcome{background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SomoW4Dl-fI/AAAAAAAAFhg/x_B2bHNOTRI/welcome.png) no-repeat; height:35px;}
.spotlight{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrUygjTcn3I/AAAAAAAAFqM/TshfWp0s1pU/spotlight.jpg) no-repeat; height:35px;}
.micro-subscription{background:url(http://lh3.ggpht.com/_TqPdHmAEwTM/SruVXd--XmI/AAAAAAAAFsQ/16k7sH2O-uc/micro.jpg) no-repeat; height:38px;}
.wnew{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SrU1Wil93AI/AAAAAAAAFqQ/gO4tDKHS2z0/wn.jpg) no-repeat; height:35px;}
.hotlinks{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrU4RRJZGyI/AAAAAAAAFqU/sh1Ob9mFciU/hotlinks.jpg) no-repeat; height:35px;}
.cgoogle{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SrU70eF6hRI/AAAAAAAAFqc/rrqo1mYYkxI/google.jpg) no-repeat; height:33px;}
.nftw{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrU_FO1envI/AAAAAAAAFqg/-XSngKyf3vg/nftw.jpg) no-repeat; height:35px;}

/* -------------------------------- */
/* Related Post			*/
.related-post-int{
	background:url(http://lh3.ggpht.com/_TqPdHmAEwTM/SrSzEhocFBI/AAAAAAAAFqE/g0vqcul5uz8/related-post.jpg) no-repeat; 
	height:36px; width:auto; display:block;}
.related-post{padding:10px; background:#f7f7f7;}
.related-post a:link,
.related-post a:visited{
display:block; height:26px; line-height:26px; text-decoration:none; border-bottom:solid 1px #DEDEDE;}
.related-post a:hover{text-decoration:underline;}

/* -------------------------------- */
/* Design News Section 				*/

.design_news{font-size:11px;}
.design_news a{font-size:13px;}
.design_news p{margin:0; padding:4px 0; border:0;color:#777;}

/* -------------------------------- */
/* Intro Section	 				*/
#intro{border-top:none;}
#intro a{color:#232323; border-bottom:solid 1px #BBB; text-decoration:none;}
#intro ul{margin-bottom:0;}
#intro ul li{padding-bottom:0px; color:#666;}
.intro-twitter,
.intro-feed,
.intro-podcast,
.intro-delicious{
height:42px;
padding:6px 0 6px 46px;
}
.intro-delicious{padding-left:0px;}
.intro-twitter strong,
.intro-feed strong,
.intro-podcast strong,
.intro-delicious strong{
color:#232323;
display:block;
font-size:14px;
}
.intro-twitter{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SonzwRz1udI/AAAAAAAAFjE/94Kc8yXghU4/tweet.jpg) no-repeat 0 4px;}
.intro-feed{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SonzwKomHZI/AAAAAAAAFjA/v5awrhm_p0g/rss.jpg) no-repeat 0 4px;}
.intro-podcast{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/Son0hMDv8pI/AAAAAAAAFjI/WrXeVX4PpsM/podcast.jpg) no-repeat 0 4px;}
.intro-delicious{background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/Son0xAe0qUI/AAAAAAAAFjM/TNwEZSIO9-8/heart.jpg) no-repeat 0 4px;}

/* -------------------------------- */
/* DISQUS			  				*/
#disqus_thread #dsq-content h3 {font-weight: bold; border:none; background:none; padding-bottom:16px; font-weight:16px;}
#dsq-post-add{background:#EFEFEF; padding:8px;}
#dsq-content #dsq-comments .dsq-header-avatar img{border:solid 1px #DEDEDE; margin-right:14px;}

.tweetmeme{float:right; margin-left:14px; padding-top:14px;}

.jumpText a:link,
.jumpText a:visited{
	font-size:13px;
	text-decoration:none;
	font-weight:bold;
	clear:both;}
.jumpText a:hover{
	text-decoration:underline;
}
.mt{font-size:18px; display:block; color:#444;}
.micro-sub-l{
	font-size:14px;
	font-weight:bold;
	padding-bottom:6px;
}
.micro-sub-l span{
	font-size:12px;
	font-weight:normal;
	clear:both;
	display:block;
	padding-top:6px;
}
</style>
<style type='text/css'>
h2{border-top:none; padding-top:0;}
.tweetmeme{padding-top:0;}
.intro-image{display:none;}
</style>
<link href='http://lh5.ggpht.com/_TqPdHmAEwTM/Sosn6oEn_uI/AAAAAAAAFjo/3YnxZC73rsw/favicon.gif' rel='icon' type='image/png'/>
<script type="text/javascript">(function(){var a;var b=navigator.userAgent;a=-1!=b.indexOf("Mobile")&&-1!=b.indexOf("WebKit")&&-1==b.indexOf("iPad")?!0:-1!=b.indexOf("Opera Mini")?!0:!1;if(a){var c;a:{var d=window.location.href,e=d.split("?");switch(e.length){case 1:c=d+"?m=1";break a;case 2:c=0<=e[1].search("(^|&)m=")?null:d+"&m=1";break a;default:c=null}}c&&window.location.replace(c)};})();
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=8903834426366267848&amp;blogName=Woork&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=LAYOUTS&amp;searchRoot=http://woork.blogspot.com/search&amp;blogLocale=en_US&amp;homepageUrl=http://woork.blogspot.com/&amp;targetPostID=6065842085356573640&amp;vt=-318439583669872030" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
<div></div><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</div></div>
<div id='header'>
<div id='header-c'>
<p class='left'><a href='http://woork.blogspot.com'><img border='0' height='48' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SonuT8dibOI/AAAAAAAAFiw/PNJsfs3cDeg/woork-log.jpg' width='102'/></a></p>
<p class='right'>
<a href='http://woork.blogspot.com/2009/02/add-design-news-on-woork.html'>Add News</a>
<a href='http://feeds2.feedburner.com/Woork'>RSS Feed</a>
<a href='mailto:antonio.lupetti@gmail.com'>Contact Me</a>
</p>
</div>
</div>
<div id='nav-bar'>
<div id='nav-bar-c'>
<span class='nav-web'></span>
<a href='http://woork.blogspot.com/search/label/ajax?max-results=8'>Ajax</a>
<a href='http://woork.blogspot.com/search/label/blogger?max-results=8'>Blogger</a>
<a href='http://woork.blogspot.com/search/label/css?max-results=8'>CSS</a>
<a href='http://woork.blogspot.com/search/label/fonts?max-results=8'>Fonts</a>
<a href='http://woork.blogspot.com/search/label/html?max-results=8'>HTML</a>
<a href='http://woork.blogspot.com/search/label/jquery?max-results=8'>jQuery</a>
<a href='http://woork.blogspot.com/search/label/mootools?max-results=8'>MooTools</a>
<a href='http://woork.blogspot.com/search/label/PHP?max-results=8'>PHP</a>
<a href='http://woork.blogspot.com/search/label/web%20development?max-results=8'>Web Development</a>
<a href='http://woork.blogspot.com/search/label/resources?max-results=8'>Resources</a>
<a href='http://woork.blogspot.com/2007/10/table-of-contents.html'>More...</a>
</div>
<div id='nav-bar-d'>
<span class='nav-tech'></span>
<a href='http://woork.blogspot.com/search/label/apple?max-results=8'>Apple</a>
<a href='http://woork.blogspot.com/search/label/applications?max-results=8'>Applications</a>
<a href='http://woork.blogspot.com/search/label/gadgets?max-results=8'>Gadgets</a>
<a href='http://woork.blogspot.com/search/label/google?max-results=8'>Google</a>
<a href='http://woork.blogspot.com/search/label/microsoft?max-results=8'>Microsoft</a>
<a href='http://woork.blogspot.com/search/label/social%20networks?max-results=8'>Social Networks</a>
<a href='http://woork.blogspot.com/search/label/tech%20news?max-results=8'>Tech News</a>
</div>
</div>
<div id='container'>
<div class='moved'>This blog has moved here: <a href='http://woorkup.com'>woorkup.com</a> | <strong>FOLLOW ME ON TWITTER <a href='http://www.youtube.com/user/woorkup'>@woork</a></strong></div>
<table border='0' cellpadding='0' cellspacing='0' width='936'>
<tr>
<td rowspan='2' valign='top' width='551'><div id='main_left'>
<div class='section' id='main_s'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed'>
<!-- google_ad_section_start -->
<div class='date-header'>
Sunday, September 6, 2009
</div>
<div class='post hentry'>
<div class='tweetmeme'>
<script type='text/javascript'>
tweetmeme_url = 'http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'></script>
</div>
<a name='6065842085356573640'></a>
<h2>
<a href='http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html'>
HTML 5 Visual Cheat Sheet by Woork
</a>
</h2>
<img src='http://lh5.ggpht.com/_TqPdHmAEwTM/SrVeWExP8iI/AAAAAAAAFqk/ygCe1B6U0E8/al.jpg' style='float:left; padding-right:14px;'/>
<div class='post-tag'>by Antonio Lupetti <b style='border-right:solid 1px #CCCCCC; padding:0 10px; margin-right:10px;'>Tag</b>
<a href='http://woork.blogspot.com/search/label/cheat%20sheet?max-results=10' rel='tag' style='border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;'>
cheat sheet
</a>
<a href='http://woork.blogspot.com/search/label/html?max-results=10' rel='tag' style='border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;'>
html
</a>
</div>
<div class='share-delicious'>
<a href='http://del.icio.us/post?url=http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html&title=HTML 5 Visual Cheat Sheet by Woork' target='_blank'>Save to delicious</a>
</div>
<div class='share-stumble'>
<a href='http://www.stumbleupon.com/submit?url=http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html'>StumbleUpon</a></div>
<div class='spacer'></div>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='354'><!-- google_ad_section_end -->
<script type="text/javascript"><!--
google_ad_client="pub-9932209926421067";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000+00031+00005+00302";
google_ad_width=300;
google_ad_height=250;
google_ad_format="300x250_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="333333";
google_color_url="185D99";
google_color_text="777777";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- google_ad_section_start --></td>
<td><div class='ads-right-min'>
<a class='mini-feed' href='http://feeds2.feedburner.com/Woork'>Subscribe RSS Feed</a>
<a class='mini-tweet' href='http://twitter.com/home/?status=HTML 5 Visual Cheat Sheet by Woork%20http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html via @woork'>ReTweet</a>
<a class='mini-facebook' href='http://www.facebook.com/share.php?u=http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html'>Share on Facebook</a>
<a class='mini-tech' href='http://technorati.com/faves?sub=addfavbtn&add=http://woork.blogspot.com'>Add to Technorati</a>
</div>
</td>
</tr>
</table>
</div>
<div class='post-body-n'>
<p>
<img class="intro-image" src="http://lh5.ggpht.com/_TqPdHmAEwTM/Sq-_HCAddTI/AAAAAAAAFoM/W0TEenZJ2Gs/html5preview.jpg" style="float: right; margin-left: 14px;" />HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.<br /><a name='more'></a> Here's a preview of my cheat sheet:<br /><br /><div style="text-align: center;"><img src="http://lh3.ggpht.com/_TqPdHmAEwTM/SqPTCAAT2pI/AAAAAAAAFms/dAjxsuhcWvQ/html5cheatsheet.jpg" style="border: 1px solid rgb(222, 222, 222); padding: 4px;" /><br /></div><br />This is an example of listed tags and attributes:<br /><br /><div style="text-align: center;"><img src="http://lh6.ggpht.com/_TqPdHmAEwTM/SqPbZgJkRmI/AAAAAAAAFm0/lfdtqyLWfjc/htmlcs2.jpg" style="border: 1px solid rgb(222, 222, 222); padding: 4px;" /><br /></div><br /><div style="text-align: center;"><img src="http://lh6.ggpht.com/_TqPdHmAEwTM/SqPhE82TQZI/AAAAAAAAFnA/gbgR_nzKWDA/htmlcs3.jpg" style="border: 1px solid rgb(222, 222, 222); padding: 4px;" /><br /></div><br />HTML 5 Cheat Sheet is available in high quality for A3 paper format. Take a look at <a href="http://www.flickr.com/photos/antoniolupetti/3894233282/sizes/l/">this link for a preview</a> or download the high quality version (<span style="font-weight: bold;">dark</span> or <span style="font-weight: bold;">white</span> background):<br /><br /><span style="font-weight: bold;"><strong>Dark Background:</strong></span><br /><br />- <a style="font-weight: bold;" href="http://www.box.net/shared/8qnxj922oc">PDF high-quality</a> (<span style="font-weight: bold;">new!</span> thanks to <a href="http://www.webbdiva.com/">Julie Webb</a>)<br />- <a href="http://www.box.net/shared/813v2hn4eo">JPG high-quality</a><br /><br /><a href="http://www.box.net/shared/8qnxj922oc"><img src="http://lh6.ggpht.com/_TqPdHmAEwTM/Sg_-cg8AxKI/AAAAAAAAEEA/xKmP9-LvnEQ/download.png" align="absmiddle" border="0" /></a><br /><br /><br /><span style="font-weight: bold;"><strong>White Background</strong> <span style="color: rgb(204, 0, 0);">New!</span>:</span><br />I prepared this print-friendly version:<br /><br /><div style="text-align: center;"><img src="http://lh3.ggpht.com/_TqPdHmAEwTM/SqV38p-bKvI/AAAAAAAAFnE/EdSN1GEAoHk/html5-cs.jpg" style="border: 1px solid rgb(222, 222, 222); padding: 4px;" /><br /></div><br />Download this version here:<br /><br />- <a href="http://www.box.net/shared/gr6c5ufn9a"><span style="font-weight: bold;">PDF Version</span></a><br />- <a href="http://www.box.net/shared/mexk21ai1y">JPG hig-quality</a><br /><br /><a href="http://www.box.net/shared/gr6c5ufn9a"><img src="http://lh6.ggpht.com/_TqPdHmAEwTM/Sg_-cg8AxKI/AAAAAAAAEEA/xKmP9-LvnEQ/download.png" align="absmiddle" border="0" /></a><br /><br /><br />The <a href="http://www.flickr.com/photos/antoniolupetti/3894233282/">Flickr</a> version is here.<br /><br />If you have some suggestion about this cheat sheet please leave a comment or write me to my e-mail address.<br /><br /><br /><div class="related-post-int"> </div><div class="related-post"><a href="http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html">jQuery Visual Cheat Sheet</a></div>
</p>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='spacer'></div>
<p class='post-footer-line post-footer-line-1'><span class='post-timestamp'>
</span>
<div class='spacer'></div>
<span class='post-icons'>
</span>
</p>
</div>
</div>
<div class='comments' id='comments'><a name='comments'></a>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='354'><!-- google_ad_section_end -->
<script type="text/javascript"><!--
google_ad_client="pub-9932209926421067";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000+00031+00005+00302";
google_ad_width=300;
google_ad_height=250;
google_ad_format="300x250_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="333333";
google_color_url="185D99";
google_color_text="777777";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- google_ad_section_start --></td>
<td>
<div class='ads-right-min'>
<a class='mini-feed' href='http://feeds2.feedburner.com/Woork'>Subscribe RSS Feed</a>
<a class='mini-tweet' href='http://twitter.com/home/?status=HTML 5 Visual Cheat Sheet by Woork%20http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html via @woork'>ReTweet</a>
<a class='mini-facebook' href='http://www.facebook.com/share.php?u=http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html'>Share on Facebook</a>
<a class='mini-tech' href='http://technorati.com/faves?sub=addfavbtn&add=http://woork.blogspot.com'>Add to Technorati</a>
</div>
</td>
</tr>
</table>
</div>
<div class='spacer' style='height:20px;'></div>
<div id='backlinks-container' style='font-size:12px;'>
<div id='Blog1_backlinks-container'>
</div>
</div>
<div id='disqus_thread'></div>
<script src='http://disqus.com/forums/woork/embed.js' type='text/javascript'></script>
<noscript><a href='http://woork.disqus.com/?url=ref'>View the discussion thread.</a></noscript>
<a class='dsq-brlink' href='http://disqus.com'>blog comments powered by <span class='logo-disqus'>Disqus</span></a>
<div class='spacer' style='height:30px;'></div>
<dl id='comments-block' style='font-size:13px; color:#333333;'>
</dl>
</div>
<!-- google_ad_section_end -->
</div>
<div class='blog-pager' id='blog-pager'>
<a class='blog-pager-newer-link' href='http://woork.blogspot.com/2009/09/rediscovering-html-tables.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>
Newer Post
</a>
<a class='blog-pager-older-link' href='http://woork.blogspot.com/2009/08/css-code-structure-for-html-5-some.html' id='Blog1_blog-pager-older-link' title='Older Post'>
Older Post
</a>
<a class='home-link' href='http://woork.blogspot.com/'>
Home
</a>
</div>
<div class='clear'></div>
</div></div>
</div></td>
<td background='http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html' valign='top' width='250'>
<div id='searchform'>
<form action='http://woork.blogspot.com/search' method='get'>
<input id='search-box' name='q' type='text' value='Search...'/>
<input alt='Search' id='search-submit' src='http://lh6.ggpht.com/_TqPdHmAEwTM/SrUdGeZruvI/AAAAAAAAFqI/-2uMxNC34Ss/search.gif' type='image'/>
<input name='max-results' type='hidden' value='6'/>
</form></div>
<div class='welcome'></div>
<div class='list_section' id='intro' style='margin-bottom:10px;'>
<ul id='intro-ul'><li class='intro-twitter'><strong>Twitter</strong>
<a href='http://twitter.com/woork'>Follow</a> woork on Twitter </li>
<li class='intro-feed'><strong>RSS Feed</strong>
<a href='http://feeds2.feedburner.com/Woork'>Subscribe</a> to stay up to date</li>
<li class='intro-podcast'><strong>Podcast</strong> Coming soon...</li>
<li class='intro-delicious' style='border-bottom:none;'>
<table border='0' cellpadding='0' cellspacing='0' height='28' width='228'>
<tr>
<td width='46px'>
</td>
<td valign='bottom'>
<b class='big-number' id='delicious-b'>0</b> delicious lovers
<a href='http://del.icio.us/post?url=http://woork.blogspot.com&title=woork | Antonio Lupetti Personal Blog about Tech, Web, Programming and Design' target='_blank'>save</a>
<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById("delicious-b").innerHTML = urlinfo.total_posts;
}
</script>
<script src='http://badges.del.icio.us/feeds/json/url/data?url=http://woork.blogspot.com&callback=displayURL'></script></td>
</tr>
</table>
</li>
</ul>
</div>
<div style='margin-bottom:20px;'>
<a href='http://feeds2.feedburner.com/Woork'><img alt='' height='26' src='http://feeds2.feedburner.com/~fc/Woork?bg=DEDEDE&fg=555555&' style='border:0' width='88'/></a>
</div>
<div class='wnew'><span class='feed-small-right'><a href='http://feeds2.feedburner.com/Woork'>Subscribe</a></span></div>
<div class='list_section' style='padding-bottom:0; border-top:none;'>
<script src='http://feeds2.feedburner.com/Woork?format=sigpro' type='text/javascript'></script>
</div>
<div class='section' id='addsections'></div>
<div class='hotlinks'><span class='feed-small-right'><a href='http://feeds2.feedburner.com/Woork'>Subscribe</a></span></div>
<div class='list_section' style='border-top:none;'>
<div class='spacer'></div>
<ul style='margin:0; padding:0; border:0;'>
<li><a href='http://woork.blogspot.com/2009/01/woork-handbook.html'>The Woork Handbook</a></li>
<li><a href='http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html'>HTML 5 Visual Cheat Sheet </a></li>
<li><a href='http://woork.blogspot.com/2009/06/super-simple-way-to-work-with-twitter.html'>Super simple way to work with Twitter API (PHP + CSS)</a></li>
<li><a href='http://woork.blogspot.com/2009/01/structured-process-you-must-know-to.html'>Structured process you must know to develop a web application</a></li>
<li><a href='http://woork.blogspot.com/2009/01/beautiful-datepickers-and-calendars-for.html'>Beautiful datepickers and calendars for web developers</a></li>
<li><a href='http://woork.blogspot.com/2008/09/10-fonts-to-design-original-logos.html'>10 Fonts to design original logos</a></li>
</ul>
</div>
<div class='cgoogle'></div>
<!-- Include the Google Friend Connect javascript library. -->
<script src='http://www.google.com/friendconnect/script/friendconnect.js' type='text/javascript'></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id='div-1231180872818' style='width:auto; border:1px solid #cccccc;'></div>
<div class='spacer' style='margin-bottom:20px;'></div>
<!-- Render the gadget into a div. -->
<script type='text/javascript'>
var skin = {};
skin['HEIGHT'] = '240';
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#EFEFEF';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#185D99';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#185D99';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#999';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-1231180872818',
site: '03470848075554627603'},
skin);
</script>
<div class='nftw'><span class='feed-small-right'><a href='http://feeds2.feedburner.com/Woork'>Subscribe</a></span></div>
<div class='list_section' style='border-top:none;'>
<div class='spacer'></div>
<div class='design_news'>
<script src='http://feeds2.feedburner.com/woork_news?format=sigpro' type='text/javascript'></script>
</div>
<div class='small-txt'>
<strong>Share your links.</strong> 
Do you want to suggest any interesting link about web design or tech news? Submit your link.      </div>
<a class='b-spacer' href='http://woork.blogspot.com/2009/02/add-design-news-on-woork.html'>
<img alt='Submit a News' border='0' src='http://lh6.ggpht.com/_TqPdHmAEwTM/Sollqlki0pI/AAAAAAAAFhA/-QUCM0fgR9g/submit.png'/>
</a>
</div></td>
<td valign='top' width='135'><table border='0' cellpadding='0' cellspacing='0' width='135'>
<tr>
<td align='right' height='135' valign='top'><div style='margin-top:20px; padding-left:12px;'>
<div class='section' id='addsectionssidebar'><div class='widget HTML' id='HTML1'>
<div class='widget-content'>
<script type="text/javascript"><!--
google_ad_client = "pub-9932209926421067";
google_ad_host = "pub-1556223355139109";
google_ad_host_channel="00000+00031+00005+00302";
/* 120x600, creato 25/06/09 */
google_ad_slot = "2892434882";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
</div></div></div></td>
</tr>
</table>
</td>
</tr>
</table>
</div><div id='container-footer'>
<div id='footer'>
<a class='b-spacer' href='http://woork.blogspot.com'><img border='0' height='36' src='http://lh6.ggpht.com/_TqPdHmAEwTM/SonvMzf5F7I/AAAAAAAAFi0/q4J-n92ANjo/woork-down.jpg' width='97'/></a>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td style='padding-right:30px;' valign='top' width='33%'><h1>About the Author </h1>
<img class='profile_img' height='48' src='http://lh5.ggpht.com/_TqPdHmAEwTM/SonMeF8TLdI/AAAAAAAAFhw/n-V_jrFRuCU/antoniolupetti.png' width='48'/>
I am <a href='http://www.facebook.com/profile.php?id=709734006'><strong>Antonio Lupetti</strong></a>, 
Engineer, Pro Blogger, Mac User, Web addicted.
I live in Rome, ITALY.
<div class='spacer'></div>
<ul>
<li><a href='mailto:antonio.lupetti@gmail.com'>Send me an e-mail</a></li>
<li><a href='http://www.facebook.com/antoniolupetti' rel='nofollow'>Facebook</a></li>
<li><a href='http://twitter.com/Woork' rel='nofollow'>Twitter</a></li>
<li><a href='http://friendfeed.com/woork' rel='nofollow'>FriendFeed</a></li>
<li><a href='http://technorati.com/people/technorati/drhouse' rel='nofollow'>Technorati</a></li>
</ul>
<img class='b-spacer' height='57' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SruweXCaJ6I/AAAAAAAAFss/cjKGpokGdwk/twblogo.jpg' width='71'/></td>
<td class='central-p' valign='top' width='33%'>
<h1>Publications</h1>
<ul>
<li><a href='http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html'>jQuery 1.3 Visual Cheat Sheet</a></li>
<li><a href='http://woork.blogspot.com/2009/01/woork-handbook.html'>The Woork Handbook</a></li>
</ul>
<h1>Subscriptions</h1>
<ul>
<li><a href='http://feeds2.feedburner.com/Woork'>Subscribe to  RSS feed </a></li>
<li><a href='http://feedburner.google.com/fb/a/mailverify?uri=Woork' rel='nofollow'>Subscribe to RSS feed via e-mail </a></li>
</ul>
</td>
<td style='padding-left:30px;' valign='top' width='33%'>
<h1>Friends and Supporters</h1>
<ul>
<li><a href='http://briancray.com' rel='nofollow'>Brian Cray</a></li>
<li><a href='http://mayhemstudios.com/blog/' rel='nofollow'>Calvin Lee</a></li>
<li><a href='http://www.gracesmith.co.uk/' rel='nofollow'>Grace Smith</a></li>
<li><a href='http://imjustcreative.com/imjustcreative-twitter-landing-zone/2008/12/11/' rel='nofollow'>Graham Smith</a></li>
<li><a href='http://cssglobe.com/' rel='nofollow'>CSS Globe</a></li>
<li><a href='http://www.smashingmagazine.com/' rel='nofollow'>Smashing Magazine</a></li>
</ul>
<div class='spacer'></div>
<div class='powered-blogger'>Powered by <a href='http://www.blogger.com' rel='nofollow'>Blogger</a></div>
Mobile version powered by <a href='http://mobify.me/'>Mobify.me</a>
</td>
</tr>
</table>
<div id='footer-botton'> 2009 woork | All rights reserved
<div style='display:none'>
<!-- MyBlogLog -->
<script src='http://track3.mybloglog.com/js/jsserv.php?mblID=2007100713183590' type='text/javascript'></script>
<!-- Start of StatCounter Code -->
<script type='text/javascript'>
var sc_project=3032812; 
var sc_invisible=0; 
var sc_partition=33; 
var sc_security="0cd8a91c"; 
</script>
<script src='http://www.statcounter.com/counter/counter_xhtml.js' type='text/javascript'></script>
<noscript>
<div class='statcounter'><a class='statcounter' href='http://www.statcounter.com/'>
<img alt='hit counter' class='statcounter' src='http://c34.statcounter.com/3032812/0/0cd8a91c/0/'/></a></div>
</noscript>
</div></div>
</div>
</div>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="http://www.blogger.com/static/v1/widgets/2121586095-widgets.js"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8903834426366267848';BLOG_attachCsiOnload('item_'); }_WidgetManager._Init('http://www.blogger.com/rearrange?blogID\x3d8903834426366267848','http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html','8903834426366267848');
_WidgetManager._SetPageActionUrl('http://www.blogger.com/display?blogID\x3d8903834426366267848','APq4FmCsRMKkyt69cmJikZX1pGOfYTLJzZ-OH8WQ-OUG1-E3uipWoGEYRFiQGkYHlQWxcqPv3WLFyAKs-TJPKsJFk8sDq_1bUxFgTBtuyOVVJCXPYqpeIZQ\x3d','AOuZoY52caFjBiksiGlyTlw6esnYtqiy-Q:1335595920170');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'bloggerUrl': 'http://www.blogger.com', 'title': 'Woork', 'pageType': 'item', 'url': 'http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html', 'canonicalUrl': 'http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html', 'canonicalHomepageUrl': 'http://woork.blogspot.com/', 'homepageUrl': 'http://woork.blogspot.com/', 'blogspotFaviconUrl': 'http://woork.blogspot.com/favicon.ico', 'enabledCommentProfileImages': true, 'searchLabel': '', 'searchQuery': '', 'pageName': 'HTML 5 Visual Cheat Sheet by Woork', 'pageTitle': 'Woork: HTML 5 Visual Cheat Sheet by Woork', 'encoding': 'UTF-8', 'locale': 'en-US', 'isPrivate': false, 'isMobile': false, 'mobileClass': '', 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42Woork - Atom\42 href\75\42http://woork.blogspot.com/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42Woork - RSS\42 href\75\42http://woork.blogspot.com/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42Woork - Atom\42 href\75\42http://www.blogger.com/feeds/8903834426366267848/posts/default\42 /\76\n\74link rel\75\42EditURI\42 type\75\42application/rsd+xml\42 title\75\42RSD\42 href\75\42http://www.blogger.com/rsd.g?blogID\758903834426366267848\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42Woork - Atom\42 href\75\42http://woork.blogspot.com/feeds/6065842085356573640/comments/default\42 /\76\n', 'meTag': '', 'openIdOpTag': '', 'postImageThumbnailUrl': 'http://lh5.ggpht.com/_TqPdHmAEwTM/Sq-_HCAddTI/AAAAAAAAFoM/W0TEenZJ2Gs/s72-c/html5preview.jpg', 'imageSrcTag': '\74link rel\75\42image_src\42 href\75\42http://lh5.ggpht.com/_TqPdHmAEwTM/Sq-_HCAddTI/AAAAAAAAFoM/W0TEenZJ2Gs/s72-c/html5preview.jpg\42 /\76\n', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var a\75window;function c(b){this.t\75{};this.tick\75function(b,i,d){d\75void 0!\75d?d:(new Date).getTime();this.t[b]\75[d,i]};this.tick(\42start\42,null,b)}var f\75new c;a.jstiming\75{Timer:c,load:f};try{var g\75null;a.chrome\46\46a.chrome.csi\46\46(g\75Math.floor(a.chrome.csi().pageT));null\75\75g\46\46a.gtbExternal\46\46(g\75a.gtbExternal.pageT());null\75\75g\46\46a.external\46\46(g\75a.external.pageT);g\46\46(a.jstiming.pt\75g)}catch(h){};a.tickAboveFold\75function(b){var e\0750;if(b.offsetParent){do e+\75b.offsetTop;while(b\75b.offsetParent)}b\75e;750\76\75b\46\46a.jstiming.load.tick(\42aft\42)};var j\75!1;function k(){j||(j\75!0,a.jstiming.load.tick(\42firstScrollTime\42))}a.addEventListener?a.addEventListener(\42scroll\42,k,!1):a.attachEvent(\42onscroll\42,k);\n })();\74/script\076', 'mobileHeadScript': '', 'adsenseClientId': 'pub-9932209926421067', 'analyticsAccountNumber': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/f75e48f708466c7f/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/b8f4953a48a6764f'}}, {'name': 'skin', 'data': {'vars': {}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '/?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '/?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '/?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '/?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '/?view\75timeslide'}}}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'addsectionssidebar', null, document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main_s', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'http://www.blogger.com/static/v1/jsbin/1818731363-lbx.js', 'lightboxCssUrl': 'http://www.blogger.com/static/v1/v-css/3397631820-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar'));
</script>
</body>
</html>